/**
 * Created by guiyongdong on 16/10/7.
 */
import  React, {Component} from 'react';
import  {
    StyleSheet,
    View,
    Image,
    TouchableOpacity,
    Dimensions,
    PixelRatio
} from 'react-native';

var WindowWidth = Dimensions.get('window').width;

export  default class HomeImageCellView extends Component {
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
      }
    render() {
        var imageStyle = this.props.imageStyle;
        if (imageStyle == 'fourspace') {
            //四图
            return this._renderFourspace();
        }else if(imageStyle == 'subject_2_picture'){
            //两图
            return this._renderSubject_2_picture();
        }else if(imageStyle == 'subject_3_l_picture'){
            //三图左
            return this._renderSubject_3_l_picture();
        }else if(imageStyle == 'subject_3_r_picture'){
            //三图右
            return this._renderSubject_3_r_picture();
        }

    }
    _renderSubject_3_l_picture() {
        var imageUrlArray=[];
        for(var i = 0; i< this.props.imageArray.length; i++){
            var imageUrl = 'http://demo.jiuyunda.net:24799'+this.props.imageArray[i]['img'].toString();
            imageUrlArray.push(imageUrl);
        }
        return(
            <View style={[this.props.style,{flexDirection:'row'}]}>
                <TouchableOpacity activeOpacity={0.8}>
                    <Image style={styles.subject_3_pictureLeft} source={{uri:imageUrlArray[0]}} resizeMode='stretch'/>
                </TouchableOpacity>
                <View style={{width:1/PixelRatio.get(),height:WindowWidth/375*220,backgroundColor:'#DCDCDC'}}/>
                <View style={styles.subject_3_pictureLeft}>
                    <TouchableOpacity activeOpacity={0.8}>
                        <Image style={styles.subject_3_pictureTop} source={{uri:imageUrlArray[1]}} resizeMode='stretch'/>
                    </TouchableOpacity>
                    <View style={{height:1/PixelRatio.get(),width:WindowWidth/2,backgroundColor:'#DCDCDC'}}/>
                    <TouchableOpacity activeOpacity={0.8}>
                        <Image style={styles.subject_3_pictureTop} source={{uri:imageUrlArray[2]}} resizeMode='stretch'/>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
    _renderSubject_3_r_picture() {
        var imageUrlArray=[];
        for(var i = 0; i< this.props.imageArray.length; i++){
            var imageUrl = 'http://demo.jiuyunda.net:24799'+this.props.imageArray[i]['img'].toString();
            imageUrlArray.push(imageUrl);
        }
        return(
            <View style={[this.props.style,{flexDirection:'row'}]}>
                <View style={styles.subject_3_pictureLeft}>
                    <TouchableOpacity activeOpacity={0.8}>
                        <Image style={styles.subject_3_pictureTop} source={{uri:imageUrlArray[1]}} resizeMode='stretch'/>
                    </TouchableOpacity>
                    <View style={{height:1/PixelRatio.get(),width:WindowWidth/2,backgroundColor:'#DCDCDC'}}/>
                    <TouchableOpacity activeOpacity={0.8}>
                        <Image style={styles.subject_3_pictureTop} source={{uri:imageUrlArray[2]}} resizeMode='stretch'/>
                    </TouchableOpacity>
                </View>
                <View style={{width:1/PixelRatio.get(),height:WindowWidth/375*220,backgroundColor:'#DCDCDC'}}/>
                <TouchableOpacity activeOpacity={0.8}>
                    <Image style={styles.subject_3_pictureLeft} source={{uri:imageUrlArray[0]}} resizeMode='stretch'/>
                </TouchableOpacity>
            </View>
        );
    }
    _renderSubject_2_picture() {
        var imageUrlArray=[];
        for(var i = 0; i< this.props.imageArray.length; i++){
            var imageUrl = 'http://demo.jiuyunda.net:24799'+this.props.imageArray[i]['img'].toString();
            imageUrlArray.push(imageUrl);
        }
        return(
            <View style={[this.props.style,{flexDirection:'row'}]}>
                <TouchableOpacity activeOpacity={0.8}>
                    <Image style={styles.fourLeft} source={{uri:imageUrlArray[0]}} resizeMode='stretch'/>
                </TouchableOpacity>
                <View style={{width:1/PixelRatio.get(),height:WindowWidth/375*110,backgroundColor:'#DCDCDC'}}/>
                <TouchableOpacity activeOpacity={0.8}>
                    <Image style={styles.fourLeft} source={{uri:imageUrlArray[1]}} resizeMode='stretch'/>
                </TouchableOpacity>
            </View>
        );
    }
    
    _renderFourspace() {
        var imageUrlArray=[];
        for(var i = 0; i< this.props.imageArray.length; i++){
            var imageUrl = 'http://demo.jiuyunda.net:24799'+this.props.imageArray[i]['img'].toString();
            imageUrlArray.push(imageUrl);
        }
        return(
            <View style={[this.props.style,styles.container]}>
                <TouchableOpacity activeOpacity={0.8}>
                    <Image style={styles.fourLeft} source={{uri:imageUrlArray[0]}} resizeMode='stretch'/>
                </TouchableOpacity>
                <View style={{width:1/PixelRatio.get(),height:WindowWidth/375*180,backgroundColor:'#DCDCDC'}}/>
                <View style={{width:WindowWidth-WindowWidth/375*180*(130/180),height:WindowWidth/375*180}}>
                    <TouchableOpacity activeOpacity={0.8}>
                        <Image style={styles.fourTop} source={{uri:imageUrlArray[1]}} resizeMode='stretch'/>
                    </TouchableOpacity>
                    <View style={{height:1/PixelRatio.get(),width:WindowWidth-WindowWidth/375*180*(130/180),backgroundColor:'#DCDCDC'}}/>
                    <View style={{flexDirection:'row',width:WindowWidth-WindowWidth/375*180*(130/180),height:WindowWidth/375*180-(WindowWidth-WindowWidth/375*180*(130/180))*(63/225)}}>
                        <TouchableOpacity activeOpacity={0.8}>
                            <Image style={styles.fourBottom1} source={{uri:imageUrlArray[2]}} resizeMode='stretch'/>
                        </TouchableOpacity>
                        <View style={{width:1/PixelRatio.get(),height:WindowWidth/375*180-(WindowWidth-WindowWidth/375*180*(130/180))*(63/225),backgroundColor:'#DCDCDC'}}/>
                        <TouchableOpacity activeOpacity={0.8}>
                            <Image style={styles.fourBottom1} source={{uri:imageUrlArray[3]}} resizeMode='stretch'/>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>  
        );
    }
    
}
const styles = StyleSheet.create({
    container:{
        flexDirection:'row'
    },
    fourLeft:{
        width:WindowWidth/375*180*(130/180),
        height:WindowWidth/375*180
    },
    fourTop:{
        width:WindowWidth-WindowWidth/375*180*(130/180),
        height:(WindowWidth-WindowWidth/375*180*(130/180))*(63/225)
    },
    fourBottom1:{
        width:(WindowWidth-WindowWidth/375*180*(130/180))/2,
        height:WindowWidth/375*180-(WindowWidth-WindowWidth/375*180*(130/180))*(63/225)
    },
    subject_2_pictureLeft:{
        width:WindowWidth/2,
        height:WindowWidth/375*110
    },
    subject_3_pictureLeft:{
        width:WindowWidth/2,
        height:WindowWidth/375*220
    },
    subject_3_pictureTop:{
        width:WindowWidth/2,
        height:WindowWidth/375*220/2
    }
});